<template>
  <div class="dashboard-editor-container">
    <!-- 查询和其他操作 -->
    <el-form v-show="!showDetails" :inline="true" class="demo-form-inline">
      <!--<el-form-item label="客户名称">
        <el-select  @change="fsiteNoQueChange" v-model="listQuery.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
          <el-option
            v-for="item in getListfsiteNo"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>-->
      <el-form-item label="工作计划"><!-- @change="planChange"-->
          <el-select clearable filterable v-model="listQuery.fbillno" class="filter-item" placeholder="请选择实验室">
            <el-option
              v-for="item in getListfpointNo"
              :key="item.fbillno"
              :label="item.fworkmemo"
              :value="item.fbillno"/>
          </el-select>
        <el-button
          round
          size="medium"
          class="filter-item"
          :style="{background:buttonColor.lookup,color:buttonColor.color}"
          @click="handleFilter"
        >查找</el-button>
      </el-form-item>
      <el-form-item style="margin-left:20px">
          <el-button class="filter-item" :style="{background:buttonColor.lookup,color:buttonColor.color}" @click="handleUpdate1('outweight')">去皮</el-button>
          <el-button class="filter-item" :style="{background:buttonColor.add,color:buttonColor.color}" @click="handleUpdate1('star')">称重</el-button>
          <el-button class="filter-item" :style="{background:buttonColor.lookup,color:buttonColor.color}" @click="handleUpdate1('pause')">暂停</el-button>
          <el-button class="filter-item" :style="{background:buttonColor.lookup,color:buttonColor.color}" @click="handleUpdate1('proce')">继续</el-button>
          <el-button class="filter-item" :style="{background:buttonColor.delete,color:buttonColor.color}" @click="handleUpdate1('cancel')">取消</el-button>
      </el-form-item>
    </el-form>
    <el-form v-show="showDetails">
      <el-form-item>
        <el-button :style="{background:buttonColor.edit,color:buttonColor.color}" round size="small" @click="showHeadList(item)"
        >返回</el-button>
      </el-form-item>
    </el-form>

      <div class="asd" v-for="(item,index) in dataList" :key="index" style="display:inline-block;width:45%">
          <div v-show="!showDetails" style="width:100%;display:flex;align-items: center;margin-top:20px">
              <div style="width:40%;margin-left:6%">
                  <div class="demo-image">
                   <p>{{item.fequipmenttag}}<el-button :style="{background:buttonColor.edit,color:buttonColor.color,marginLeft:'8px'}" round size="small" @click="showDetailList(index)"
                  >明细</el-button></p>
                    mac:{{item.fmacno}}
                  </div>
                <img style="width:100%;height:150px;background-size:100% 100%;" :src="browserUrl">
              </div>
            <div class="demo-image" style="position:relative;background:#000; width: 60%; height: 160px;">
              <div style="position:absolute;top:0;left:0">
                <el-button v-if="item.state=='w'" disabled circle style="width:40px;height:40px;background: blueviolet; color: #FFFFFF;display: flex;justify-content: center;align-items: center;">传输</el-button>
                <el-button v-else disabled circle style="width:40px;height:40px;background: #9aaabf; color: #FFFFFF;text-align: center;display: flex;justify-content: center;align-items: center;">传输</el-button>
              </div>
              <div style="position:absolute;top:50%;left:50%;color: #00e400; text-align: center; font-size: 83px;transform: translateY(-50%) translateX(-50%);">
                {{item.weight}}
              </div>
              <div style="position:absolute;top:80%;left:0">
                <el-button v-if="item.state=='o'" disabled circle style="width:40px;height:40px;background: #00e400; color: #FFFFFF;display: flex;justify-content: center;align-items: center;transform: translateY(-25%);">稳定</el-button>
                <el-button v-else disabled circle style="width:40px;height:40px;background: #9aaabf; color: #FFFFFF;display: flex;justify-content: center;align-items: center;transform: translateY(-25%);">稳定</el-button>
              </div>
              <div style="position:absolute;top:80%;left:90%;text-align: right; font-size: x-large; color: #FFFFFF;">克</div>
            </div>
      </div>
        <div v-show="showDetails && detailIndex === index" class="demo-image" style="margin-top: 10px;width:222%">
          <el-table :data="item.details" element-loading-text="正在查询中。。。" border fit highlight-current-row>
            <el-table-column :index="indexMethod" align="center" label="序" type="index" />
            <el-table-column align="center" label="设定重量" prop="setWeight" />
            <el-table-column align="center" label="实际重量" prop="weight" />
            <el-table-column align="center" label="速度" prop="gear" />
            <el-table-column align="center" label="计数" prop="count" />
            <el-table-column align="center" label="状态" prop="state" />
            <el-table-column :formatter="datetimeFormat" align="center" label="时间" prop="updateTime" />
            <!--<el-table-column :formatter="datetimeFormat" align="center" label="开始时间" prop="begDate" />
            <el-table-column :formatter="datetimeFormat" align="center" label="结束时间" prop="endDate" />-->
          </el-table>
        </div>
      <!--<br><br>-->
    </div>
  </div>
</template>

<script>
import { listplanHead, sendQualityEqtOrderToMQTT } from '@/api/planHead'
import request from '@/utils/request'
import { getPointOptions,getListArea } from '@/api/area'
import moment from "moment";
import LabDialog from '@/components/LabDialog'
import { tableColor,buttonColor } from '@/filters/index'

export default {
  name: 'Index',
  components: { LabDialog },
  data() {
    return {
      tableColor,
      buttonColor,
      getListfpointNoAll: null,
      getListfpointNo: null,
      labFlag:null,
      searchVisiblelab: false,
      labDialogFsiteNo:null,
      dataList: {
        fmacno: null,
        isOpen: null,
        isAlarming: null,
        state: null,
        weight: null,
        details: []
      },
      showDetails: false,
      detailIndex: 0,
      details: {
        setWeight: null,
        weight: null,
        gear: null,
        count: null,
        state: null,
        updateTime: null,
        begDate: null,
        endDate: null
      },
      browserUrl: './qualityEqt.png',
      listQuery: {
        fbillno: undefined
      }
    }
  },
  created() {

    if(this.$store.state.user.fsiteLevel==3){
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
      // 工作计划
      listplanHead({ fplanuser: this.$store.state.user.id, fbillstate: 2 })
        .then(response => {
          console.log('object',response);
          this.getListfpointNo = response.data.data.list
          this.listQuery.fbillno = response.data.data.list[0].fbillno
          // this.dataList = response.data.data.list[0].details
        })
        .catch(() => {
          this.getListfpointNo = []
        })
    }else{
      // 工作计划
      listplanHead({ fplanuser: this.$store.state.user.id, fbillstate: 2 })
        .then(response => {
          this.getListfpointNo = response.data.data.list
          this.listQuery.fbillno = response.data.data.list[0].fbillno
          // this.dataList = response.data.data.list[0].details
        })
        .catch(() => {
          this.getListfpointNo = []
        })
    }
    this.timer()
  },
  methods: {
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // handleFilter: function() {
    // },
    // planChange(e){
    //   console.log('eee',e);
    //     for (let i = 0; i < this.getListfpointNo.length; i++) {
    //       if (e == this.getListfpointNo[i].fbillno) {
    //         console.log('this.getListfpointNo[i]',this.getListfpointNo[i])
    //         this.dataList = this.getListfpointNo[i].details
    //       }
    //     }
    // },
    timer() {
      return setInterval(()=>{
        this.handleFilter()
      },1000)
    },
    handleFilter: function() {
      // this.listQuery.fpointNo = this.$store.state.user.fsiteNo
      if (this.$route.fullPath !== '/planHead2') {
        // window.clearTimeout(this.refreshData); this.refreshData = null;
        clearInterval(this.timer);
        this.timer = null;
        return
      }
      listQualityEqtData2(this.listQuery)
        .then(response => {
          this.dataList = response.data.data.list
        })
        .catch(() => {
          this.dataList = []
        })
    },
    handleUpdate1(opername) {
      if (opername === 'star') { // 称重
        // if (this.selectedList === null || this.selectedList.length ===  0) {
        //   this.$notify.info({
        //     title: "",
        //     message: "请先选择物料",
        //   });
        //   return;
        // }
        //设定重量
        // sendQualityEqtOrderToMQTT({ opername: 'setweight', opervalue:this.selectedList[0].fsetweight, fbillno:this.dataForm.fbillno })
        sendQualityEqtOrderToMQTT({ opername: 'setweight', fbillno:this.listQuery.fbillno })
          .then(response => {
            // setTimeout(() => {
            this.sendQualityEqtOrderToMQTT1()
            // }, 1000)
          })
          .catch(() => {
            this.$notify.error({
              title: "",
              message: "设定重量失败",
            });
          })

      } else {
        // sendQualityEqtOrderToMQTT({ opername: opername, fbillno:this.dataForm.fbillno })
        sendQualityEqtOrderToMQTT({ opername: opername, fbillno:this.listQuery.fbillno })
          .then(response => {
            // this.list = response.data.data.list
          })
          .catch(() => {
            this.$notify.error({
              title: "",
              message: "失败",
            });
          })
      }
    },
    sendQualityEqtOrderToMQTT1: function() {
      //设定档位
      // sendQualityEqtOrderToMQTT({ opername: 'setspeed', opervalue:this.selectedList[0].fspeed, fbillno:this.dataForm.fbillno })
      sendQualityEqtOrderToMQTT({ opername: 'setspeed', fbillno:this.listQuery.fbillno })
        .then(response => {
          // setTimeout(() => {
          this.sendQualityEqtOrderToMQTT2()
          // }, 1000)
        })
        .catch(() => {
          this.$notify.error({
            title: "",
            message: "设定档位失败",
          });
        })
    },
    sendQualityEqtOrderToMQTT2() {
      //开始称重
      // sendQualityEqtOrderToMQTT({ opername: 'star', fbillno:this.dataForm.fbillno })
      sendQualityEqtOrderToMQTT({ opername: 'star', fbillno:this.listQuery.fbillno })
        .then(response => {
          // this.list = response.data.data.list
        })
        .catch(() => {
          this.$notify.error({
            title: "",
            message: "称重失败",
          });
        })
    },
    //
    showHeadList(row){
      this.showDetails = false
    },

    //
    showDetailList(index){
      this.showDetails = true
      this.detailIndex = index
    },

    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
export function listQualityEqtData2(query) {
  return request({
    url: '/screen/getQualityEqtDatas2',
    method: 'get',
    params: query
  })
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
